<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">

<title>Traffic Hub Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
      function init()
      {
        var map = new OpenLayers.Map("basicMap",{
	        	controls: [
	   		        new OpenLayers.Control.Navigation(),
	   		        new OpenLayers.Control.PanZoomBar(),
	   		     	new OpenLayers.Control.Permalink(),
	   		     	new OpenLayers.Control.MousePosition(),
	   		     	new OpenLayers.Control.ScaleLine(),
	   		        new OpenLayers.Control.LayerSwitcher()]
        });
        
        //OpenStreetMap Layer
        var mapnik = new OpenLayers.Layer.OSM(
        		'OpenStreetMap'
        );
        //Position
        var vector_layer2 = new OpenLayers.Layer.Vector(
        		'Real Time Position', 
        		{
		            style: {
		            'fillColor': '#ff0000',
		            'fillOpacity': .8,
		            'strokeColor': '#c00000',
		            'strokeWidth': 3,
		            'pointRadius': 8}
        		}
      	);
      	//Vector Layer
		var vector_layer = new OpenLayers.Layer.Vector(
			'Editable Vectors'
		);

		var userlon = <%=(String)session.getAttribute("userlon")%>;
      	var userlat = <%=(String)session.getAttribute("userlat")%>;
      	
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position       = new OpenLayers.LonLat(userlon,userlat).transform(fromProjection,toProjection);
        var zoom           = 12;
 
        // Add layers
        map.addLayers([mapnik,vector_layer2,vector_layer]);
        
      	// Add a vector editing control. Must do it after map.addLayers([...]).
        map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));

      	// Add a point feature.
        vector_layer2.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point
        (userlon,userlat).transform(fromProjection,toProjection))]);

      	// Set center
        map.setCenter(position, zoom);
      	
      	// call servlet method of testdb to estimate the database update by clients
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'UserServlet.do?method=testdb', true);
        xhr.send(null);
      }
</script>

</head>
<body onload="init();">
<!-- BEGIN wrapper -->
<div id="wrapper">
  <!-- BEGIN header -->
  <div id="header">
	<p class="links"><a>Login Successfully</a></p>
	<div class="break"></div>
	<div class="logo">
	  <h1><a>GPS-based Crowd Sourced Intelligent Traffic Information Hub</a></h1>
	</div>
	<div class="break"></div>
	<ol>
		<div class="Logout">
			<form name="form1" action="UserServlet.do?method=logout" method="post">
			<table width="300" border="0">
				<tr>	
					<td width="40" align="right">Welcome!</td>
					<td width="60" align="center"><%=(String) session.getAttribute("username")%></td>
					<td width="80" align="right"><%=(String) session.getAttribute("userlat")%></td>
					<td width="5" align="left">,</td>
					<td width="80" align="left"><%=(String) session.getAttribute("userlon")%></td>
					<td width="40" align="right"><input class="btn" type="submit" name="submit" value="Logout"></td>
				</tr>
			</table>
			</form>
		</div>
	</ol>
  </div>
  <!-- END header -->
  <!-- BEGIN content -->
  <div id="content2">
	<div id="basicMap"></div>
  </div>
  <!-- END content -->
  <!-- BEGIN footer -->
	<div id="footer">
		<p>RUI ZHU | Division of Geodesy and Geoinformatics | Department of Urban Planning and Environment | Royal Institute of Technology | Sweden</p>
	</div>
  <!-- END footer -->
</div>
<!-- END wrapper -->
</body>
</html>
